<template>
  <!-- 添加或修改设备对话框 -->
  <el-drawer
    :wrapperClosable="false"
    :title="title"
    :visible.sync="open"
    direction="rtl"
  >
    <el-container>
      <el-main>
        <el-form
          ref="form"
          :model="form"
          label-position="top"
          label-width="80px"
        >
          <el-container>
            <el-form-item>
              <el-row v-for="(v, i) in tags">
                <el-col :span="7">
                  <!-- 其他配置标识 -->
                  <el-form-item prop="key">
                    <el-input :disabled="false" v-model="v.key" placeholder="请输入标签KEY"/>
                  </el-form-item>
                </el-col>
                <el-col :span="6" class="tagItem">
                  <!-- 其他配置值 -->
                  <el-form-item prop="name">
                    <el-input v-model="v.name" placeholder="请输入标签名"/>
                  </el-form-item>
                </el-col>
                <el-col :span="6" class="tagItem">
                  <!-- 其他配置描述 -->
                  <el-form-item prop="value">
                    <el-input v-model="v.value" placeholder="请输入标签值"/>
                  </el-form-item>
                </el-col>
                <el-col :span="2" class="tagItem">
                  <el-button
                    type="text"
                    size="1"
                    icon="el-icon-remove-outline"
                    v-hasPermi="['iot:product:remove']"
                    @click="removeTagDomain(i)"
                  >删除
                  </el-button>
                </el-col>
              </el-row>
              <el-button
                type="text"
                size="1"
                icon="el-icon-circle-plus-outline"
                v-hasPermi="['iot:product:remove']"
                @click="addTagDomain()"
              >新增
              </el-button>
            </el-form-item>
          </el-container>
        </el-form>
      </el-main>
      <el-footer>
        <div class="bottom-bar" style="text-align: right">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </el-footer>
    </el-container>
  </el-drawer>
</template>

<script>
import { addTags, removeTags } from '@/api/iot/device'
import { mapState } from 'vuex'

export default {
  name: 'DeviceTagsAddEdit',
  data() {
    return {
      //标签列表
      tags: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {}
    }
  },
  computed: {
    ...mapState({
      deviceDetailInfo: state => state.device.deviceDetailInfo
    })
  },
  methods: {

    /**
     * 删除标签
     */
    removeTagDomain(index) {

      const id = this.tags[index].id

      if (id) {

        removeTags(id).then(response => {

          this.$modal.msgSuccess('删除成功')
          this.tags.splice(index, 1)
          this.$emit('update')
        })
      } else {
        this.tags.splice(index, 1)
      }
    },
    /**
     * 新增标签
     */
    addTagDomain() {
      this.tags.push({})
    },
    // 取消按钮
    cancel() {
      this.open = false
    },
    /** 修改按钮操作 */
    handleUpdate() {

      this.tags = []

      this.open = true
      this.title = '编辑标签'

      let metadata = JSON.parse(this.deviceDetailInfo.metadata) || {}

      let tags = metadata.tags || []

      tags.forEach(tag => {
        this.tags.push({ key: tag.id, name: tag.name, value: null })
      })

      this.deviceDetailInfo.tags.forEach(tag => {
        const index = this.tags.findIndex(item => item.key === tag.key)
        if (index !== -1) {
          this.$set(this.tags, index, tag)
        } else {
          this.tags.push(tag)
        }
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {

          this.tags.forEach(tag => {
            tag.deviceId = this.deviceDetailInfo.id
          })

          addTags(this.tags).then(response => {
            this.$modal.msgSuccess('操作成功')
            this.open = false
            this.$store.dispatch('GetDeviceDetailInfo', this.deviceDetailInfo.id)
          })
        }
      })
    }
  }
}

</script>

<style lang="scss" scoped>
.tagItem {
  margin-left: 10px;
}
</style>
